<script>
export default {
  name: 'Spu'
}
</script>
<script setup>
import SpuEdit from './SpuEdit/index.vue'
import SkuEdit from './SkuEdit/index.vue'
import { useProductStore } from '@/store/modules/product'
import { storeToRefs } from 'pinia'
import $API from '@/api/index'
import { ref, nextTick, watch } from 'vue'
import { provide } from 'vue'
import { ElMessage } from 'element-plus'

const productStore = useProductStore()
const { categoryIdData, spuEditor } = storeToRefs(productStore)

watch(
  () => productStore.categoryIdData.id3,
  newV => {
    spuInfoList.value = []
    if (!!newV) reqSpuInfoList()
  }
)
// 分页器
// 当前页页码
const page = ref(1)
// 每页显示条数
const limit = ref(3)
// 总条数
const total = ref(0)
// 每页显示条数改变函数
const sizeChange = function () {
  if (categoryIdData.value.id3) reqSpuInfoList()
}
// 当前页页码改变函数
const currentChange = function () {
  if (categoryIdData.value.id3) reqSpuInfoList()
}

// 所选三级分类id获取到的attr信息列表和请求函数
const spuInfoList = ref([])
// 请求分类信息列表
const reqSpuInfoList = async function () {
  const { id3: category3Id } = categoryIdData.value
  const data = { page: page.value, limit: limit.value, category3Id }
  const result = await $API.product.spu.reqSpuInfoList(data)
  if (result?.data?.code === 200) {
    spuInfoList.value = result.data.data.records
    total.value = result.data.data.total
    return 'ok'
  } else {
    return Promise.reject(result?.data?.message)
  }
}

// 请求删除spu
const reqDeleteSpuInfo = async function (spuId) {
  const result = await $API.product.spu.reqDeleteSpuInfo(spuId)
  if (result?.data?.code === 200) {
    ElMessage.success('SPU删除成功')
    await reqSpuInfoList()

    return 'ok'
  } else {
    ElMessage.error('SPU删除失败')
    return Promise.reject(result?.data?.message)
  }
}

// sku列表显示flag
const skuListVisible = ref(false)
// sku列表信息
const skuListInfo = ref([])
// 请求sku列表信息函数
const openSkuList = async function (row) {
  skuListVisible.value = true
  const result = await $API.product.spu.reqSkuInfoBySpuId(row.id)
  if (result?.data?.code === 200) {
    skuListInfo.value = result.data.data

    return 'ok'
  } else {
    return Promise.reject(result?.data?.message)
  }
}

provide('reqSpuInfoList', reqSpuInfoList)
</script>

<template>
  <div>
    <!-- 三级分类 -->
    <Category :isDisabled="spuEditor !== 0" />

    <!-- spu信息列表 -->
    <el-card
      class="marginTop20px"
      v-if="spuEditor === 0"
    >
      <!-- 添加SPU按钮 -->
      <el-button
        type="primary"
        icon="Plus"
        @click="productStore.openSpuEditor()"
        :disabled="!categoryIdData.id3"
        v-has="'btn.Spu.add'"
        >添加SPU</el-button
      >

      <!-- SPU列表 -->
      <el-table
        :data="spuInfoList"
        border
        stripe
        style="margin: 20px 0"
      >
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="80"
        />
        <el-table-column
          prop="spuName"
          label="SPU名字"
        />
        <el-table-column
          prop="description"
          label="SPU描述"
        />
        <el-table-column label="操作">
          <template #="{ row }">
            <el-button
              type="primary"
              icon="Plus"
              @click="productStore.openSkuEditor(row)"
              v-has="'btn.Spu.addsku'"
            />
            <el-button
              type="warning"
              icon="Edit"
              @click="productStore.openSpuEditor(row)"
              v-has="'btn.Spu.update'"
            />
            <el-button
              type="info"
              icon="View"
              @click="openSkuList(row)"
              v-has="'btn.Spu.skus'"
            />
            <el-popconfirm
              width="250px"
              :title="`确定要删除 ${row.spuName} 吗？`"
              @confirm="reqDeleteSpuInfo(row.id)"
              placement="top"
            >
              <template #reference>
                <el-button
                  type="danger"
                  icon="Delete"
                  v-has="'btn.Spu.delete'"
                />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        v-model:currentPage="page"
        v-model:page-size="limit"
        :page-sizes="[3, 5, 7, 9]"
        layout="prev, pager, next, jumper, -> , sizes, total"
        :total="total"
      >
        :pager-count="7">
      </el-pagination>
    </el-card>

    <!-- spu编辑card -->
    <SpuEdit v-else-if="spuEditor === 1" />
    <!-- sku编辑card -->
    <SkuEdit v-else-if="spuEditor === 2" />

    <el-dialog
      v-model="skuListVisible"
      title="SKU列表"
      width="800"
    >
      <el-table
        :data="skuListInfo"
        border
      >
        <el-table-column
          prop="skuName"
          label="sku名字"
        />
        <el-table-column
          prop="price"
          label="价格"
        />
        <el-table-column
          prop="weight"
          label="重量"
        />
        <el-table-column label="图片">
          <template #="{ row }">
            <img
              class="height150px"
              :src="row.skuDefaultImg"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
// start
</style>
